page-client-note-edit {
    $manulife-color:#07a963;
    $gray-color:#e9e9e9;
    $default-border:0.35vw solid $gray-color!important;
    $label-text-size:4.44vw;
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    ion-content{
        ion-item{
            //border-bottom:$default-border;
            padding:3.33vw;
        }
        ion-item.item-block{
            .item-inner{
                border-bottom: 0;
                padding-right: computed-vw(60)!important;
            }
        }
        ion-item.btn-contain{
            border:0!important;
            .item-inner{
                padding: 0!important;
            }
        }
        ion-item-sliding{
            height: 100%;
            ion-item{
                height: 100%;
                color:#1f212a;
                padding-left: 5.55vw;
                .label-ios{
                    font-size: 3.88vw;
                }
                span.voiceNote{
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    background:url("../assets/images/client/client-note/icon_notes.png") no-repeat;
                    color:#fff;
                    width:25vw;
                    height:7.78vw;
                    background-size: contain;
                    img{
                        width:5vw;
                        height:5vw;
                    }
                    img.loading{
                        display: none;
                        animation: circle 2s linear infinite;
                    }
                    @keyframes circle {
                        from{
                            transform:rotateZ(0deg);
                        }
                        to{
                            transform:rotateZ(360deg);
                        }
                    }
                    i{
                        font-style:normal;
                    }
                }
            }
            ion-item.download{
                span.voiceNote{
                    img.normal{
                        display: none;
                    }
                    img.loading{
                        display: inline-block;
                    }
                }
            }
            ion-item-options{
                border:0;
                height: 100%;
                .button-ios{
                    background-color: #e66660!important;
                    padding: 0!important;
                    width:16.67vw;
                    i{
                        width:6.67vw;
                        height:6.67vw;
                        background: url("../assets/images/client/client-note/ic_list_delete.png") no-repeat;
                        background-size: cover;
                    }
                }
            }
        }
        ion-item-sliding.active-slide{
            background-color: #f5f5f5;
            ion-item{
                background-color: #f5f5f5;
            }
        }
        .content-contain.word{
            background-color: #FFFFFF;
            padding: 3.33vw computed-vw(60);
            .item-inner{
                padding:0!important;
            }
            textarea{
                width: 100%;
                height: 30vw;
                border: 0;
                font-size: 4.8vw;
                resize: none;
            }
        }
        #btn-contain{
            border: 0!important;
            padding: 6.3vw computed-vw(60) 0 computed-vw(60);
            .item-inner{
                padding:0!important;
            }
            .label-ios{
                margin:0;
            }
            .btn-del{
                font-size: 4.16vw;
                width:100%;
                height: computed-vw(96);
                border: 1px solid #eeeeee;
                border-radius: 1vw;
                background-color: #e66660;
                color: #FFFFFF;
            }
        }
        .voice-contain{
            height:21.85vw;
            padding-left: computed-vw(60)!important;
            .label-ios{
                margin:0;
                position: relative;
            }
            .item-inner{
                padding:0!important;
            }
            span.voiceNote{
                display: flex;
                align-items: center;
                justify-content: space-around;
                background:url("../assets/images/client/client-note/icon_notes.png") no-repeat;
                color:#fff;
                width:25vw;
                height:7.78vw;
                background-size: contain;
                img{
                    width:5vw;
                    height:5vw;
                }
                i{
                    font-style:normal;
                }
            }
            span.deleteVoice{
                font-size: 4.167vw;
                color:#e04343;
                position: absolute;
                right:0;
                top:0;
            }
            span.voice-tip{
                font-size:5vw ;
                color:#999;
            }
        }
        .type-contain{
            font-size: 4.167vw;
            color: #333;
            height:15.74vw;
            padding-left:computed-vw(60);
            .label-ios{
                color:#333!important;
                font-size:computed-vw(45)!important;
            }
            .item-cover{
                padding:0;
            }
            .item-inner{
                padding-right: computed-vw(60)!important;
            }
            .select-ios{
                min-width: 30vw;
                border:0;
                padding: 0;
                height: 100%;
                line-height: 15.74vw;
                .select-text{
                    text-align: right;
                    color:#333!important;
                    font-size:computed-vw(45)!important;
                    padding-right: 1vw;
                }
                .select-icon{
                    border-left:0;
                    width: 5.733vw;
                    height: 100%;
                    display: none;
                    .select-icon-inner{
                        color: #fff;
                        width: 100%;
                        height: 100%;
                        background-size: computed-vw(45) computed-vw(45);
                        background-repeat: no-repeat;
                        background-image: url("../assets/images/schedule/schedule-add/icon_right.png");
                        background-position: 50% computed-vw(60);
                        transform: rotate(90deg);
                        padding: 0;
                        margin: 0;
                        top: 0;
                        border:0;
                    }
                }
            }
            ion-icon[name="arrow"]{
                margin-right: 0!important;
                width: computed-vw(45);
                height: computed-vw(45);
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url("../assets/images/schedule/schedule-add/icon_right.png");
                background-position: 0 2vw;
                transform: rotate(90deg);
                margin:0;
            }
        }
        .schedule-contain{
            font-size: 4.167vw;
            color: #333;
            padding-left: computed-vw(60);
            height: 15.74vw;
            .toggle-icon{
                border-radius: 4vw;
                background-color: #D7D7D7;
            }
            .toggle-icon::before{
                background-color: #D7D7D7
            }
            .toggle-checked .toggle-icon{
                background-color: #35AC63!important;
            }
            .item-cover{
                padding:0;
            }
            .item-inner{
                padding-right: computed-vw(60)!important;
            }
            .toggle-ios{
                padding:0;
                width:computed-vw(140);
                height:computed-vw(80);
                .toggle-inner{
                    width: computed-vw(61);
                    height: computed-vw(61);
                    border-radius: computed-vw(35);
                    left: computed-vw(10);
                    top: computed-vw(8);
                }
            }
            .toggle-ios.toggle-checked .toggle-inner{
                //transform: translate3d(9.79vw, 0, 0);
            }
        }
        .schedule-contain:after{
            bottom:-1px;
        }
        .bottom-part{
            margin-bottom: 40vw;
        }
    }
}
